---
title: Ajout du temps de lecture
description: Créez un module d'extension Remark pour ajouter le temps de lecture à vos fichiers Markdown ou MDX.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Créez un [module d'extension Remark](https://github.com/remarkjs/remark) qui ajoute une propriété de temps de lecture au frontmatter de vos fichiers Markdown ou MDX. Utilisez cette propriété pour afficher le temps de lecture de chaque page.

## Recette

<Steps>
1. Installer les paquets d'aide

    Installez ces deux paquets d'aide :
    - [`reading-time`](https://www.npmjs.com/package/reading-time) pour calculer les minutes de lecture
    - [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) pour extraire tout le texte de votre markdown

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install reading-time mdast-util-to-string
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add reading-time mdast-util-to-string
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add reading-time mdast-util-to-string
      ```
      </Fragment>
    </PackageManagerTabs>

2. Créer un module d'extension Remark.

    Ce module d'extension utilise le paquet `mdast-util-to-string` pour obtenir le texte du fichier Markdown. Ce texte est ensuite transmis au paquet `reading-time` pour calculer le temps de lecture en minutes.

    ```js title="remark-reading-time.mjs"
    import getReadingTime from 'reading-time';
    import { toString } from 'mdast-util-to-string';

    export function remarkReadingTime() {
      return function (tree, { data }) {
        const textOnPage = toString(tree);
        const readingTime = getReadingTime(textOnPage);
        // readingTime.text nous donnera le temps de lecture en minutes sous la forme d'une chaîne de caractères conviviale,
        // Ex: "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }
    ```

3. Ajouter le module d'extension à votre configuration :

    ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime],"
    import { defineConfig } from 'astro/config';
    import { remarkReadingTime } from './remark-reading-time.mjs';

    export default defineConfig({
      markdown: {
        remarkPlugins: [remarkReadingTime],
      },
    });
    ```

    Désormais, tous les documents Markdown auront une propriété `minutesRead` calculée dans leur frontmatter. 

4. Afficher le temps de lecture

    Si vos articles de blog sont stockés dans une [collection de contenu](/fr/guides/content-collections/), accédez au `remarkPluginFrontmatter` à partir de la fonction `render(entry)`. Ensuite, insérez `minutesRead` dans votre modèle à l'endroit où vous voulez qu'il apparaisse.

    ```astro title="src/pages/posts/[slug].astro" "const { Content, remarkPluginFrontmatter } = await render(entry);" "<p>{remarkPluginFrontmatter.minutesRead}</p>"
    ---
    import { getCollection, render } from 'astro:content';

    export async function getStaticPaths() {
      const blog = await getCollection('blog');
      return blog.map(entry => ({
        params: { slug: entry.id },
        props: { entry },
      }));
    }

    const { entry } = Astro.props;
    const { Content, remarkPluginFrontmatter } = await render(entry);
    ---

    <html>
      <head>...</head>
      <body>
        ...
        <p>{remarkPluginFrontmatter.minutesRead}</p>
        ...
      </body>
    </html>
    ```

    Si vous utilisez une [mise en page Markdown](/fr/basics/layouts/#mises-en-page-markdown), utilisez la propriété `minutesRead` du frontmatter accessible depuis `Astro.props` dans votre modèle.

    ```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "<p>{minutesRead}</p>"
    ---
    const { minutesRead } = Astro.props.frontmatter;
    ---

    <html>
      <head>...</head>
      <body>
        <p>{minutesRead}</p>
        <slot />
      </body>
    </html>
    ```
</Steps>
